<template>
  <el-select
    v-if="single"
    class="m-2"
    :placeholder="'请选择' + desc"
    v-model="value"
    @change="onChange"
    :filterable="true"
    ref="select"
  >
    <el-option :value="0" :label="'请选择' + desc" />
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
  <el-select
    v-else
    class="m-2"
    :placeholder="'请选择' + desc"
    multiple
    v-model="values"
    @change="onChange"
    :filterable="true"
    ref="select"
  >
    <el-option :value="0" :label="'请选择' + desc" />
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>
<script lang="ts">
import { ref, defineComponent, onMounted, watch, toRefs } from 'vue'
import http from '@/http' // change your http path
type Option = {
  label: String
  value: number
}
type Result = {
  datas: Array<Option> // 数据
  list: Array<any> // 列表原始数据
}
export default defineComponent({
  props: {
    url: {
      type: String,
      required: true,
    },
    desc: String,
    single: {
      type: Boolean,
      default: true,
    },
    params: {
      type: Object,
      default: {},
    }, // 额外参数
    reflectLabel: String, // 映射字段 如果后端传来的数据不符合要求则需要转换数据 父组件需要传入处理
  },
  emits: ['update:modelValue'],
  setup(props, context) {
    const value = ref(0)
    const valuesInit: Array<String> = []
    const values = ref(valuesInit)
    const optionsInit: Array<Option> = []
    const options = ref(optionsInit)

    const page = ref(1)
    const size = ref(10)
    const finished = ref(false) // 是否完成  true 是 false 否
    const { url } = toRefs(props)
    watch(url, () => {
      finished.value = false
      options.value = []
      page.value = 1
      getList()
    })
    const getList = () => {
      if (finished.value) return
      // get optins by api TD
      http
        .fetchPost(props.url, Object.assign(props.params, { page: page.value, size: size.value }))
        .then((res: any) => {
          const result = res.data as Result
          if (result.list.length === 0) {
            finished.value = true // 已完成
          }
          const labelName = props.reflectLabel
          if (labelName) {
            // 需要转换数据
            result.datas.map((item, index) => {
              options.value.push({
                label: result.list[index][labelName],
                value: item.value,
              })
            })
          } else if (result.datas.length) {
            // 不需要数据转换
            options.value = options.value.concat(result.datas)
          }
          page.value += 1
        })
    }

    getList()
    const onChange = (e: any) => {
      context.emit('update:modelValue', e)
    }
    const select = ref(null)
    onMounted(() => {
      let dom = document
        .querySelectorAll('.el-select-dropdown')[0]
        .querySelector('.el-scrollbar__wrap')
      if (dom) {
        dom.addEventListener('scroll', function () {
          if (dom && dom.scrollTop + dom.clientHeight >= dom.scrollHeight) {
            getList()
          }
        })
      }
    })
    return {
      options,
      onChange,
      value,
      values,
      getList,
      select,
    }
  },
})
</script>
